<template>
  <div v-for="menu in menuItem" :key="menu.id">
    <a-menu-item v-if="menu.children.length == 0" :key="menu.id">
      <router-link v-if="menu.isExternalLink == 0" :to="menu.url" style="display: flex;align-items: center;">
        <img alt="sider_icon" :src=" proxy.PicPrefixUrl + menu.icon" style="height: 18px;width: 18px" />
        <span style="margin-left: 8px;"> {{ menu.menuName }} </span>
      </router-link>
      <a v-if="menu.isExternalLink == 1" :href="menu.url" style="display: flex;align-items: center">
        <img alt="sider_icon" :src=" proxy.PicPrefixUrl + menu.icon" style="height: 18px;width: 18px" />
        <span style="margin-left: 8px;"> {{ menu.menuName }} </span>
      </a>
    </a-menu-item>
    <a-sub-menu v-else :title="menu.menuName">
      <template #icon>
        <img alt="sider_icon" :src=" proxy.PicPrefixUrl + menu.icon" style="height: 18px;width: 18px" />
      </template>
      <RecursiveMenu :menuItem="menu.children"  />
    </a-sub-menu>
  </div>

</template>

<script setup lang="ts">
  import type { Menu } from '@/interface/Menu';
  defineProps<{ menuItem : Menu[] }>();
  import { getCurrentInstance } from "vue";

  let { proxy } = getCurrentInstance() as  any;
</script>

<style scoped lang="scss">

</style>
